<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>采集统计</title>
  <link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/easyui/easyui_my.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/css/css.css" />

  <script type="text/javascript" src="${ctx}/js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="${ctx}/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${ctx }/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="${ctx}/js/common.js"></script>
  <script type="text/javascript" src="${ctx}/js/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="${ctx}/js/highcharts/modules/exporting.js"></script>
  <script type="text/javascript">
//设置指定日期
  Date.prototype.format = function(fmt){
  	var o = {"M+": this.getMonth()+1,        //月份
  	"d+": this.getDate(),                    //日
  	"h+": this.getHours(),                   //小时
  	"m+": this.getMinutes(),                 //分
  	"s+": this.getSeconds(),                 //秒
  	"q+": Math.floor((this.getMonth()+3)/3), //季度
  	"S" : this.getMilliseconds()             //毫秒
  	};
  	if(/(y+)/.test(fmt))
  	fmt=fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
  	for(var k in o)
  		if(new RegExp("("+ k +")").test(fmt))
  	fmt= fmt.replace(RegExp.$1, (RegExp.$1.length==1)?(o[k]):(("00"+ o[k]).substr((""+o[k]).length)));
  	return fmt;
  };
  //获取日期getData(0)今天,getData(7)七天前
  function getDatex(day){
  	var zdate=new Date();
  	var sdate=zdate.getTime();
  	var edate=new Date(sdate-(day*24*60*60*1000)).format("yyyy-MM-dd");
  	return edate;
  }
  function getDatex1(day){
  	var zdate=new Date();
  	var sdate=zdate.getTime();
  	var edate=new Date(sdate-(day*24*60*60*1000)).format("yyyy-MM-dd");
  	return edate;
  }
    var exportData="";
    $(function(){
      Highcharts.setOptions({
        lang: {
          printChart:"打印图表",
          downloadJPEG: "下载JPEG 图片" ,
          downloadPDF: "下载PDF文档"  ,
          downloadPNG: "下载PNG 图片"  ,
          downloadSVG: "下载SVG 矢量图" ,
          exportButtonTitle: "导出图片"
        }
      });
      //设置日期初始值
   	$("#startTime").datetimebox("setValue",getDatex(7));
   	$("#endTime").datetimebox("setValue",getDatex1(-1));
    });

    $(function(){
    	initTable();
    });
function initTable(){
	var startTimeStr= $("#startTime").combobox('getValue');
	var endTimeStr= $("#endTime").combobox('getValue');
	$.ajax({
        url: "${ctx}/cxtj/findcjtj.htm",
        type: 'post',
        data: {startTime:startTimeStr,
        	endTime:endTimeStr},
        dataType: "json",
        success:function(data){
        	exportData=data;
           // highcharts2(data.rows);//折线图
            highcharts(data)//柱状图
        }
	 });
}
    //布控类型统计饼图
    var eventData = {};//布控类型统计图点击事件--数据
    function highcharts2(data) {
      var seriesData = [];
      for (var i = 0; i < data.length; i++) {
          seriesData[i] = {
            name:data[i].tjmc,
            y : data[i].sum,
            tjbh:data[i].tjbh,
            sum1:data[i].sum1,
            sum2:data[i].sum2,
            sum3:data[i].sum3,
            sum4:data[i].sum4,
            sum5:data[i].sum5
          };
      }
      eventData=seriesData[0];
      $('#picDiv1').highcharts({
        chart : {
          type : 'pie',
          //height : 283,
          //width : 370,
          options3d : {
            enabled : false,
            alpha : 45
          }
        },
        title : {
          text : "<span>布控类型<br>统计图</span>",
          margin:5,
          style:{"color": "#ff8f22"/*,"fontSize": "14px"*/},
          verticalAlign:"middle",
          y:-5
        },
        subtitle : {
          text : ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.y}</b><br/>所占比例:<b>{point.percentage:.1f} %</b>'
        },
        exporting: {
          filename: '',
          sourceWidth: 1000,
          sourceHeight: 550,
          url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
        },
        credits : {
          enabled : false
        },
        plotOptions : {
          pie : {
            allowPointSelect: true,
            innerSize : 120,  //饼图内半径
            depth : 45,
            dataLabels: {
              enabled: true,
              //format: '{point.name}',
              formatter: function(){   //重写point.name
                if(this.point.name.length>5) {
                  return this.point.name.substr(0,4)+"...";
                }else{
                  return this.point.name;
                }
              },
              style: { //标签文字样式
                //fontSize:"10px"
              },
              distance : 0   //标签文字与饼图的距离
            }
          },
          series: {
            cursor: 'pointer',
            events: {
              click: function(event) {
                highcartsEvent(event.point);//布控类型统计图点击事件
              }
            }
          }
        },
        series : [ {
          name : '数量',
          data : seriesData
        } ]
      });
    }
    //布控类型统计图点击事件
    function highcartsEvent(data){
      var seriesData1 = [];
      var seriesData2 = [];
      seriesData1[0]={name:'有效数量',y:data.sum1};
      seriesData1[1]={name:'撤销数量',y:data.sum2};
      seriesData2[0]={name:'待审核数量',y:data.sum3};
      seriesData2[1]={name:'已通过数量',y:data.sum4};
      seriesData2[2]={name:'废弃数量',y:data.sum5};
      $("#picName").html(data.name+"布控状态统计");
      highcharts3("布<br>控<br>状<br>态<br>统<br>计<br>图","picDiv2_1",seriesData1);
      highcharts3("审<br>核<br>状<br>态<br>统<br>计<br>图","picDiv2_2",seriesData2);
    }
    //布控类型状态统计图
    function highcharts3(title,divid,seriesData){
      $('#' + divid).highcharts({
        chart : {
          type : 'pie'
        },
        title: {
          text: title,
          style:{"fontSize": "14px"},
          align: 'left',
          floating:true,
          x:40,
          y:20
        },
        tooltip: {
          pointFormat:'{series.name}: <b>{point.y}</b><br/>所占比例: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            shadow: false,
            center: ['50%', '50%'],
            dataLabels: {
              enabled: true,
              distance: 5   //标签文字与饼图的距离
            }
          }
        },
        exporting: {
          filename: '',
          sourceWidth: 1000,
          sourceHeight: 550,
          url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
        },
        credits : {
          enabled : false
        },
        series: [{
          name: '数量',
          data: seriesData
        }]
      });
    }
    //采集统计柱状图
    function highcharts(data) {
      var timeStr = $("#startTime").combobox('getValue') + " 至 " + $("#endTime").combobox('getValue');
      var categories = [];
      var seriesData = [];
      var seriesData1 = [];
      var seriesData2 = [];
      var seriesData3 = [];
      var seriesData4 = [];
      var seriesData5 = [];
      for(var i=0;i<data.length;i++){
        seriesData1[i] = data[i].ycjTotal;
       /*  seriesData2[i] = data[i].cjdcjTotal;
        seriesData3[i] = data[i].cjdshTotal;
        seriesData4[i] = data[i].cjyshTotal;
        seriesData5[i] = data[i].cxcjTotal; */
        categories[i] = data[i].bmmc;
      }
      seriesData=[{name: '采集量', data: seriesData1}];
      /* seriesData=[{name: '总量', data: seriesData1}
        ,{name: '待采集量', data: seriesData2}
        ,{name: '采集待审核量', data: seriesData3}
        ,{name: '采集已审核', data: seriesData4}
        ,{name: '重新采集量', data: seriesData5}]; */

      $('#container').highcharts({
        chart: {
          type: 'column'
        },
        exporting: {
        	enabled:false, //去除右上角下载按钮
          filename: '',
          sourceWidth: 1000,
          sourceHeight: 800,
          url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
        },
        title: {
          text: '档案采集统计图'
        },
        subtitle: {
          text: timeStr,
          x: -20
        },
        credits: {
          enabled: false
        },
        xAxis: {
          categories: categories,
          labels: {
            rotation: -45
          }
        },
        yAxis: {
          allowDecimals:false,
          min: 0,
          title: {
            text: '采集数量'
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y} 条</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: seriesData
      });
    }
/*     //图形选择
    $(function() {
      $('#txqh').combobox({
        valueField: 'id',
        textField: 'text',
        panelHeight:'auto',
        onSelect:function(selectValue){
          if(selectValue.id==1){
            $("#container1").hide();
            $("#container").show();
          }else{
            $("#container").hide();
            $("#container1").show();
            highcartsEvent(eventData);//布控类型统计图点击事件
          }
        },
        data:[{id:'1',text:'柱状图'},
          {id:'2',text:'饼状图'}]
      });
    }); */
    function export1(flage){
      var options=$('#TableData').datagrid('getPager').data("pagination").options;
      var pageNumber=options.pageNumber;//当前页数
      var pageSize=options.pageSize;//分页大小
      var total=options.total;//记录总数
      var queryParams=$('#TableData').datagrid('options').queryParams;
      if(total==0){//数据为空时，不能导出
        alert("暂无数据，无法导出！");
      }else{
        $("#page").val(pageNumber);
        $("#pageSize").val(pageSize);
        $("#exp_startTime").val(queryParams.startTime);
        $("#exp_endTime").val(queryParams.endTime);
        $("#exp_bkr").val(queryParams.bkr);
        $("#exp_flage").val(flage);
        $("#exportFrom").submit();
      }
    }
    function bgxx(){
      $("#tableDiv").show();
      $("#picDiv").hide();
      $("#TableData").datagrid("resize");
    }
    function stxx(){
      $("#picDiv").show();
      $("#tableDiv").hide();
      highcharts2(exportData);//折线图
      initBkslZzt(exportData)//柱状图
    }
  </script>
</head>
<!-- <body class="easyui-layout" options="border:false"> -->
<body>
<div data-options="region:'north',height:72,border:false" style="padding-left:10px;padding-right: 10px;padding-top: 5px;">
  <div class="xinxichaxunkuangz1">
    <div class="dashujtiaojianxuanxiangkuan">
      <div class="dashujtiaojianxuanxiangkuan_lie">
        <div class="tiaojian_key">开始时间：</div>
        <div class="tiaojian_values" style="width:1000px">
          <ul class="tiaojian_values_limian">
            <li>
              <span id="startTimeDiv" class="textbox combo" style="height: 20px">
                <input id="startTime" type="text" name="startTime"  class="easyui-datetimebox shurukuangkais" style='width: 140px;height: 20px'/>
              </span>
            </li>
            <li><span class="buchongdbiaotdsw">结束时间：</span>
              <span id="endTimeDiv" class="textbox combo" style="height: 20px">
                <input id="endTime" type="text" name="endTime"  class="easyui-datetimebox shurukuangkais" style='width: 140px;height: 20px' />
              </span>
            </li>
<!--        <li><span class="buchongdbiaotdsw">布控人：</span>
                <input id="bkr" type="text" name="bkr" class="shurukuangkais"/>
            </li>
            <li><span class="buchongdbiaotdsw">图形选择：</span>
              <input id="txqh" name="txqh" value="1" style="width:100px"/>
            </li> -->
          </ul>
        </div>
      </div>
      <div class="chaxunchongzhianniu">
        <a href="javascript:initTable()" class="sousuocx">查询</a>
        <%--<a href="###" class="congzhim">重置</a>--%>
      </div>
    </div>
  </div>
</div>
<div data-options="region:'center',border:false" style="padding-left:10px;padding-right: 10px;overflow-y:auto" >
  <div class="easyui-layout xinxichaxunkuangz2" data-options="fit:true,border:false">
    <!-- <div class="tupianqiehuantop" data-options="region:'north',border:false" >
      <span class="chaxunjieguosd">搜索结果</span>
    </div> -->
    <div id="tableDiv" style="display: none" data-options="region:'center',border:false">
      <table id="TableData" data-options="fit:true"></table>
      <a href="javascript:void(0)" id="exportButton"  name="exportButton" class="easyui-splitbutton" DATA-OPTIONS="menu:'#mm',iconCls:'icon-excel'" ><b>导出Excel</b></a>
      <div id="mm" style="width:100px;">
        <div DATA-OPTIONS="iconCls:'icon-excel' " onClick="export1(1)">导出当前页</div>
        <div DATA-OPTIONS="iconCls:'icon-excel' " onClick="export1(2)">导出全部</div>
      </div>
    </div>
    <div id="picDiv" class="tongyi_zhongjiantu1">
      <div id="container" style="height: 100%;width: 100%"></div>
      <!-- <div id="container1" style="margin: 0 auto;width: 80%;height: 300px;display: none;">
        <div id="picDiv1" style="float: left;width: 40%;height: 300px;"></div>
        <div id="picDiv2" style="float: right;width: 40%;height: 300px;">
          <i id="picName" style="text-align: center"></i>
          <div id="picDiv2_1" style="height: 49%;"></div>
          <div id="picDiv2_2" style="height: 49%;"></div>
        </div>
      </div> -->
    </div>
  </div>
</div>
<!-- 表格导出 -->
<div style="display: none;">
  <form id="exportFrom" name="exportFrom" action="${ctx}/export/export_bklx.htm" method="post" style="visibility: hidden; display: none;">
    <input id="page" name="page" type="hidden">
    <input id="pageSize" name="pageSize" type="hidden">
    <input id="exp_startTime" name="exp_startTime" type="hidden" >
    <input id="exp_endTime" name="exp_endTime" type="hidden" >
    <input id="exp_bkr" name="exp_bkr" type="hidden" >
    <input id="exp_flage" name="exp_flage" type="hidden" >
  </form>
</div>
<!-- 表格导出 -->
</body>
</html>